<!-- 参政议政 -->
<template>
  <view class="pannel-inner-box">
    <NavBar></NavBar>
    <image class="bg-image" :src="bg" mode="widthFix" />
    <view class="area-1">
      <view class="header">
        <view class="header-left">{{ detail.key }}月</view>
        <view class="header-right">
          <view class="text">扶贫得分</view>
          <view class="num">{{ detail.score || 0 }}</view>
        </view>
      </view>
      <view class="content" v-if="detail.value?.details && detail.value.details.length">
        <view class="item"  v-for="(item, _i) of  detail.value.details" :key="_i">
          <view class="item-header">
            <view class="text">姓名：</view>
            <view class="num">{{ item.key }}</view>
          </view>
          <view class="item-msg">
            <view class="text">参与服务次数：</view>
            <view class="num">{{ item.value?.count || 0 }}</view>
          </view>
          <view class="item-msg">
            <view class="text">社会服务总分：</view>
            <view class="num">{{ item.value?.score || 0 }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import bg from "./static/base64/bg";

import useDetail from "@/store/detail";

const [ detail ] = useDetail();
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 100%;
}

.pannel-inner-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  .bg-image {
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .area-1 {
    margin-top: 360rpx;
    width: 686rpx;
    border-radius: 16rpx;
    overflow: hidden;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx;
      height: 80rpx;
      background: #fff0d7;
      font-size: 28rpx;
      font-weight: bold;
      color: #71411b;

      .header-right {
        display: flex;

        .num {
          margin-left: 10rpx;
        }
      }
    }

    .content {
      background: #fff;
      padding: 0 20rpx;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.03);

      .item {
        padding: 20rpx 0;
        border-top: 2rpx dashed #ccc;
        overflow: hidden;

        &:first-child {
          border-top: none;
        }

        .item-header {
          display: flex;
          font-size: 28rpx;
          font-weight: bold;
        }

        .item-msg {
          display: flex;
          margin-top: 20rpx;
          font-size: 28rpx;
          color: #666666;
        }
      }
    }
  }
}
</style>
